<!--
 * @Date: 2022-04-07 16:57:23
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-24 15:32:04
 * @FilePath: \weibovue\src\views\Login\Login.vue
 * @Description: 登陆组件
-->
<template>
  <div class="loginContainer">
    <ValidateBox>
      <template v-slot:validateCtx>
        <el-form
          :rules="rules"
          ref="ruleFormRef"
          status-icon
          label-width="120px"
          class="demo-ruleForm"
          :model="ruleForm"
        >
          <el-form-item label="用户名" label-width="80px" prop="userName">
            <el-input
              type="text"
              autocomplete="off"
              v-model="ruleForm.userName"
            />
          </el-form-item>
          <el-form-item label="密码" label-width="80px" prop="password">
            <el-input
              type="password"
              autocomplete="off"
              v-model="ruleForm.password"
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:header>
        <h1 class="Header">登陆</h1>
      </template>
      <template v-slot:submitBtn>
        <button @click.prevent="loginSubmit(ruleFormRef)" class="submitBtn">
          登陆
        </button>
      </template>
    </ValidateBox>
  </div>
</template>
<script lang="ts" setup>
import {
  reactive,
  ref,
  getCurrentInstance,
  onMounted,
  watch,
  computed,
} from "vue";
import type { FormInstance } from "element-plus";
import ValidateBox from "../../components/ValidateBox.vue";
import { UserData } from "../../api/types";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
const router = useRouter();
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
const ruleFormRef = ref<FormInstance>();
//表单绑定数据
const rules = reactive({
  userName: [{ required: true, message: "用户名不可为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不可为空", trigger: "blur" }],
});
//绑定数据
const ruleForm = reactive({
  userName: "",
  password: "",
  //后端判断使用
  type: "login",
});
//用户登陆函数
const login = async (data: UserData) => {
  let res = await $api.user.reqLogin(data);
  // console.log(res);
  if (res.code == 200) {
    store.commit("updateLoginStatus", true);
    store.commit("updateUserInfo", res.data);
    ElMessage({
      type: "success",
      message: "登陆成功,正在跳转主页",
      duration: 1500,
    });
    setTimeout(() => {
      router.push({ name: "Home" });
    }, 1500);
  } else {
    ElMessage({
      type: "error",
      message: `${res.message}`,
    });
  }
};
const flag = computed(() => store.state.isLogin);
//表单校验规则
const loginSubmit = (formEl: FormInstance | undefined) => {
  // console.log(store.state);
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // console.log('submit!')
      login(ruleForm);
    } else {
      // console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="less" scoped>
.loginContainer {
  height: 50vh;
  display: flex;
  justify-content: center;
  margin-top: 100px;
  background-color: transparent;
  .submitBtn {
    width: 100px;
    border: 0;
    background-color: #add8e6;
    color: #ff8200;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
  }

  .Header {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
